<template>
	
 <div class="container-fluid" style="background-color: #F6F6F6;">
        <div class="row">
            <div class="col-5" style="height: 100px;text-align: center;">
                <br><h1 style="font-family: 'Stencil';">{{RUNOOB}}<span style="color: #96B97D;">{{com}}</span></h1>
            </div>
            <div class="col-6">
                <form action="">
                    <br>
                    <input type="text" placeholder="搜索...">
                </form>
            </div>
        </div>
        <div class="row" style="background-color: #96B97D;">
            <div class="col-9" style="margin: 0 auto;">
                <ul class="ul1">
                    <li v-for="item in items">
						<a href="#">{{item}}</a>
					</li>
                </ul>
            </div>
        </div>
<br>
        <div class="row" style="height: 540px;">
            <div class="col-1" style="text-align: center;margin-left: 170px;">
                <ul class="ul2">
                    <li v-for="item1 in items">
                        {{item1}}
                    </li>
                </ul>
            </div>
            <div class="col-7" style="margin-left: 30px;">
                <h2 style="font-family: '华文中宋';"><span style="color: #96B97D;">{{uid}}</span>{{name}}</h2>
                <iframe src="https://www.runoob.com/" width="100%" height="450px" ></iframe>
            </div>
            <div class="col-2">
                <ul class="ul2">
                    <li v-for="item1 in items1">
                        {{item1}} 
                    </li>
                </ul>
            </div>
        </div>
    
    </div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		methods: {


		},
		data() {
			return {

				title: 'Runoob.COM',
				items: [
					'HTML',
					'HTML',
					'HTML',
					'HTML',
					'HTML',
					'HTML',
					'HTML',
					'HTML',
					'HTML',
					
					
				],
				leftTitle: 'HTML 教程',
				items1: [
					'HTML 教程',
					'HTML 简介',
					'HTML 基础',
					'HTML 元素',
					'HTML 属性',
					'HTML 标题',
					'HTML 段落',
					'HTML 文本格式',
					'HTML 链接',
					'HTML 头部',
					'HTML CSS',
					'HTML 图像'
				],
				uid: '01',
				name: '陈炯扬',
				RUNOOB:'RUNOOB',
				com:'.com',
				




			}
		}
	}
</script>


	
<style>
	
        *{
            padding: 0;
            margin: 0;
        }
        form input{
            width:450px;
            height: 40px;
            padding-left: 10px;
            border-radius: 5px;
            float: right;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        .ul1 li{
           
            list-style-type: none;
            display: inline;
            float: left;
          
            padding: 10px 32px;

        }
        .ul1 li:hover{
            background-color: #fff;
        }
        .ul2 li{
            list-style-type: none;
            padding: 5px;
        }

        p{
            margin-left: 30px;
            display: inline;
            background-color: #FBFBFB;
            padding: 7px 20px;
        }
        p:hover{
            background-color: #ECECEC;
        }
</style>
<style type="text/css" scoped="scoped">
	@import url("https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css");
</style>

